import { SearchBar, SideBar } from 'antd-mobile'
import React, { useEffect, useState, useMemo } from 'react'
import style from './index.less'
import { areaList } from '@vant/area-data'
import classnames from 'classnames'
import { values } from 'lodash'
interface addressDto {
    id: string,
    name: string,
    code: string,
    text: string,
}
type Props = {
    showSearch?: boolean
}

export default (props: Props) => {
    const { province_list, city_list } = areaList // 省市区
    const { showSearch } = props;
    const [name, setName] = useState<string>()
    const [searchValue, setSearchValue] = useState('');
    const [listObj, setListObj] = useState({})
    const [selectedValue, setSelectedValue] = useState<string>();
    const handleInputChange = (value: string) => {
        setSearchValue(value)
        setTimeout(() => {
            onSearch(value)
        }, 500)
    }
    const tabsType = [
        {
            id: 'key1',
            name: '水果',
            text: '332',
        },
        {
            id: 'key2',
            name: '蔬菜',
            text: '222',
        },
        {
            id: 'key3',
            name: '水产',
            text: '222',
        },
        {
            id: 'key4',
            name: '水产',
            text: '222',
        },
        {
            id: 'key5',
            name: '水产',
            text: '222',
        },
        {
            id: 'key6',
            name: '水产',
            text: '222',
        },
        {
            id: 'key7',
            name: '水产',
            text: '222',
        },
        {
            id: 'key8',
            name: '水产',
            text: '222',
        },
        {
            id: 'key9',
            name: '水产',
            text: '222',
        },
        {
            id: 'key10',
            name: '水产',
            text: '222',
        },
        {
            id: 'key11',
            name: '水产',
            text: '222',
        },
        {
            id: 'key12',
            name: '水产',
            text: '222',
        },
        {
            id: 'key13',
            name: '水产',
            text: '222',
        },
        {
            id: 'key14',
            name: '水产',
            text: '222',
        },
    ]
    const onSearch = (value:string) => {
        console.log("SearchValue", value);
    }
    useEffect(() => {
        const proviceIdArr = Object.keys(province_list)
        const cityIdArr = Object.keys(city_list)
        // const obj = {}
        // proviceIdArr.forEach((v, i) => {
        //     const partten = v.slice(0, 2)
        //     cityIdArr.forEach((x) => {
        //         const cPartten = x.slice(0, 2)
        //         if (partten === cPartten) obj[province_list[v]] ? obj[province_list[v]].push(city_list[x]) : obj[province_list[v]] = [city_list[x]]
        //     })
        // })
        const obj = proviceIdArr.reduce((result, v) => {
            const partten = v.slice(0, 2)
            const cities = cityIdArr.filter(x => x.slice(0, 2) === partten).map(x => city_list[x])
            result[province_list[v]] = cities
            return result
        }, {})
        console.log(obj)
        setListObj(obj)

    }, [])
    const getDate = useMemo(() => {

    }, [province_list, city_list])

    const handleChange = (values: string) => {
        console.log(values);
        setName(values)
    }

    
    const handleCityClick = (value:string) => {
      setSelectedValue(value);
      console.log(value);
      
    };

    return (
        <div className={style['top-list']}>
            {showSearch ? (
                <SearchBar
                    placeholder='请输入关键字'
                    onChange={handleInputChange}
                    showCancelButton
                    value={searchValue}
                    className={style.search}
                />
            ) : null}
            <div className={style.container}>
                <div className={style.aa}>
                    <SideBar
                        onChange={handleChange}
                        className={classnames(style.side, {
                            [style.width]: true !== showSearch
                        })}
                    >
                        {showSearch ? (tabsType.map((item) => (
                            <SideBar.Item key={item.id} title={item.name} />
                        )))
                            : (Object.keys(listObj).map(item => (
                                <SideBar.Item key={item} title={item} />
                            )))}

                    </SideBar>
                </div>

                <div className={style.main}>
                    {showSearch ? (tabsType.map((item) => (
                        <div key={item.id}>
                            {item?.text}
                        </div>
                    )))
                        : (listObj[name]?.map((item) => (
                            <div 
                            key={item} 
                            className={classnames(style.city, { [style.selected]: selectedValue === item })}
                            onClick={() => handleCityClick(item)}
                            >
                                {item}
                            </div>
                        )))
                    }
                </div>
            </div>


        </div>
    )
}
